<template>
  <!--物资列表-详情列表-修改出库库弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <j-form-container>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label=""
              :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="imgUrl" style="margin-bottom: 10px;width: 100%;">
              <div style="display: flex;width: 100%;" v-if="pageType === 'detail'">
                <span v-if="!model.imgUrl" style="font-size: 12px; font-style: italic">无图片</span>
                <imgs-preview v-else :imgs="model.imgUrl" imgH="100px" imgW="133px" :isClose="true" @close="close"></imgs-preview>
              </div>
              <div style="display: flex;" v-else-if="pageType === 'edit'">
                <j-upload v-model="model.imgUrl" fileType="image" :disabled="disabled" :buttonVisible="!disabled"
                  text="上传图片"></j-upload>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import moment from 'moment';
  import JDate from '@/components/jeecg/JDate'
  import {
    httpAction,
    getAction,
    postAction
  } from '@/api/manage'
  export default {
    name: 'WtMaterialsForm',
    components: {
      JDate,
    },
    data() {
      return {
        id: '',
        confirmLoading: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        labelCol2: {
          xs: {
            span: 24
          },
          sm: {
            span: 3
          },
        },
        wrapperCol2: {
          xs: {
            span: 24
          },
          sm: {
            span: 21
          },
        },
        labelCol3: {
          xs: {
            span: 24
          },
          sm: {
            span: 4
          },
        },
        wrapperCol3: {
          xs: {
            span: 24
          },
          sm: {
            span: 20
          },
        },
        labelCol4: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          },
        },
        wrapperCol4: {
          xs: {
            span: 24
          },
          sm: {
            span: 15
          },
        },
        model: {
          id: '',
          orderNo: '',
          createTime: '',
          projectName: '',
          projectId: '',
          warehouseName: '',
          warehouseId: '',
          supplierName: '',
          supplierId: '',
          isSupplyA: 0,
          platformProductName: '',
          platformProductId: '',
          model: '',
          number: '',
          poundNum: '',
          price: '',
          locationMode: '',
          locationModeName: '',
          unit: '',
          nature: '',
          natureName: '',
          remark: '',
          imgUrl: '',
          //出库单
          brandName: '',
          brandId: '',
          materialHandler: '',
          materialHandlerGroup: '',
          purpose: '',
        },
        validatorRules: {},
        url: {
          list: '',
          edit: '/materials/wtMaterials/updateEntrance',
          queryById: '',
          wtMaterialsDetail: {
            list: '',
          },
        },
      }
    },
    isorter: {
      column: 'createTime',
      order: 'desc',
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false,
      },
      pageType: {
        type: String,
        default: '',
      },
      id: {
        type: String,
      },
    },
    computed: {},
    created() {
      if (this.pageType === 'add') {
        this.Dictionary();
      }
    },
    mounted() {

    },
    methods: {
      getList(record) {
       let params = {
         materialsDetailId:record.id
       }
       //图片列表
       getAction(`/materials/wtMaterialsImgUrl/getListBymaterialsDetailId`,params).then((res) => {
         if (res.success) {
           let imgUrls = []
           let imgUrl = '';
           imgUrls = res.result;
          let num = imgUrls.length;
           if(imgUrls && imgUrls.length>0){
             imgUrls.forEach(iii=>{
               if(!!imgUrl){
                 imgUrl+= ','+iii.imgUrl
               }else{
                 imgUrl+=iii.imgUrl
               }
             })
           }
           this.model.imgUrl = imgUrl;
           this.$emit('tolink',num)
           this.$forceUpdate();
         }
       })
      },
      edit(record) {
        this.model = Object.assign({}, record)
        this.getList(record);
        this.visible = true
      },
	  close () {
	    this.$emit('close');
	  },
    },
  }
</script>

<style scoped>
  .count {
    width: 200px;
    height: 30px;
    /* background-color: #000; */
    margin-top: -40px;
  }

  .col1 {
    display: inline-block;
    width: 300px;
  }

  .col2 {
    display: inline-block;
    width: 55%;
    margin-left: -80px;
    margin-right: -100px;
  }
</style>